<template>
    <div>
        <div class="ChangeTable">
            <Alert>
                <h2>已分配租金</h2>
            </Alert>
            <Row>
                <Col span="24">
                    <Table
                        width="100%"
                        :columns="contractTableHeadRent"
                        :data="contractTable.allocatedRentVo"
                        :loading="loading"
                        border
                    >
                        <template slot-scope="{ row, index }" slot="receivableRent">
                            <span>{{row.receivableRent==""?"":row.receivableRent.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="receivablePrinciple">
                            <span>{{row.receivablePrinciple==""?"":row.receivablePrinciple.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="receivableInterest">
                            <span>{{row.receivableInterest==""?"":row.receivableInterest.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="amountPaid">
                            <span>{{row.amountPaid==""?"":row.amountPaid.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="repaymentAmount">
                            <span>{{row.repaymentAmount==""?"":row.repaymentAmount.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="actualPrinciple">
                            <span>{{row.actualPrinciple==""?"":row.actualPrinciple.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="actualInterest">
                            <span>{{row.actualInterest==""?"":row.actualInterest.toFixed(2)}}</span>
                        </template>
                    </Table>
                </Col>
            </Row>

            <Alert>
                <h2>已分配罚息</h2>
            </Alert>
            <Row>
                <Col span="24">
                    <Table
                        width="100%"
                        :columns="contractTableHeadPenaltyInterest"
                        :data="contractTable.allocatedPenaltyInterestVo"
                        :loading="loading"
                        border
                    >
                        <template slot-scope="{ row, index }" slot="overdueAmount">
                            <span>{{row.overdueAmount==""?"":row.overdueAmount.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="exemptionAmount">
                            <span>{{row.exemptionAmount==""?"":row.exemptionAmount.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="amountPaid">
                            <span>{{row.amountPaid==""?"":row.amountPaid.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="repaymentAmount">
                            <span>{{row.repaymentAmount==""?"":row.repaymentAmount.toFixed(2)}}</span>
                        </template>
                    </Table>
                </Col>
            </Row>
            <Alert>
                <h2>已分配费用</h2>
            </Alert>
            <Row>
                <Col span="24">
                    <Table
                        width="100%"
                        :columns="contractTableHeadCost"
                        :data="contractTable.allocatedCostVo"
                        :loading="loading"
                        border
                    >
                        <template slot-scope="{ row, index }" slot="feeType">
                            <span>{{getTitle('feeType',row.feeType)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="costAmount">
                            <span>{{row.costAmount==""?"":row.costAmount.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="exemptionAmount">
                            <span>{{row.exemptionAmount==""?"":row.exemptionAmount.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="amountPaid">
                            <span>{{row.amountPaid==""?"":row.amountPaid.toFixed(2)}}</span>
                        </template>
                        <template slot-scope="{ row, index }" slot="repaymentAmount">
                            <span>{{row.repaymentAmount==""?"":row.repaymentAmount.toFixed(2)}}</span>
                        </template>
                    </Table>
                </Col>
            </Row>
        </div>
        <div class="basis-info"  style="width: 100%;">
            <Row>
                <Form :model="contractTable" :label-width="120">
                    <Col span="24">
                        <Row>
                            <Col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
                                <FormItem label="核销额" prop="contractNo">
                                 <!--   <Input clearable v-model="contractTable.writeOffAmount" placeholder
                                           :disabled="true"/>-->
                                    <RuiNumber type="currency" v-model="contractTable.writeOffAmount" disabled/>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
                                <FormItem label="分配总额" prop="usedAmt">
                                   <!-- <Input clearable v-model="contractTable.usedAmt" placeholder :disabled="true"/>-->
                                    <RuiNumber type="currency" v-model="contractTable.usedAmt" disabled/>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
                                <FormItem label="溢缴款" prop="overpayment">
                           <!--         <Input clearable v-model="contractTable.overpayment" placeholder :disabled="true"/>-->
                                    <RuiNumber type="currency" v-model="contractTable.overpayment" disabled/>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
                                <FormItem label="未分配金额" prop="unusedAmt">
                                   <!-- <Input clearable v-model="contractTable.unusedAmt" placeholder :disabled="true"/>-->
                                    <RuiNumber type="currency" v-model="contractTable.unusedAmt" disabled/>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
                                <FormItem label="退款总额/撤销金额" prop="cancellationAmount">
                               <!--     <Input clearable v-model="contractTable.cancellationAmount" placeholder
                                           :disabled="true"/>-->
                                    <RuiNumber type="currency" v-model="contractTable.cancellationAmount" disabled/>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
                                <FormItem label="未分配调整金额" prop="unallocatedAdjustmentAmount">
                                 <!--   <Input clearable v-model="contractTable.unallocatedAdjustmentAmount" placeholder
                                           :disabled="true"/>-->
                                    <RuiNumber type="currency" v-model="contractTable.unallocatedAdjustmentAmount" disabled/>
                                </FormItem>
                            </Col>
                        </Row>
                    </Col>

                </Form>
            </Row>
        </div>
    </div>
</template>
<script>
    import {getTitleFromDataDict} from "_p/basic/assets/contract/js/utils";
    import {getReceiptRecordInfo} from "_p/basic/api/contract/revoke/revoke-collection";

    export default {
        props: {
            Obj: {
                type: Object,
                required: true
            },
            loading: {
                type: Boolean,
                required: true,
                default: true
            },
            isSP: {
                type: Boolean,
                required: true,
                default: true
            },
            dataDict: {
                type: Object,
                required: true
            },
        },
        data() {
            return {
                contractTable: {
                    allocatedRentVo: [],
                    allocatedPenaltyInterestVo: [],
                    allocatedCostVo: [],
                    writeOffAmount: null,
                    usedAmt: null,
                    unusedAmt: null,
                    overpayment: null,
                    cancellationAmount: null,
                    unallocatedAdjustmentAmount: null,
                },
                openPanel: [1, 2, 3],
                formValidate: {},
                contractTableHeadRent: [
                    {
                        title: "合同号",
                        key: "contractNo",
                    },
                    {
                        title: "期数",
                        key: "termNo",
                    },
                    {
                        title: "到期日",
                        key: "dueDate",
                    },
                    {
                        title: "月供金额",
                        key: "receivableRent",
                        slot: "receivableRent",
                    },
                    {
                        title: "本金",
                        key: "receivablePrinciple",
                        slot: "receivablePrinciple",
                    },
                    {
                        title: "利息",
                        key: "receivableInterest",
                        slot: "receivableInterest",
                    },
                    {
                        title: "已还金额",
                        key: "amountPaid",
                        slot: "amountPaid",
                    },
                    {
                        title: "本次已还款金额",
                        key: "repaymentAmount",
                        slot: "repaymentAmount",
                    },
                    {
                        title: "已还本金",
                        key: "actualPrinciple",
                        slot: "actualPrinciple",
                    },
                    {
                        title: "已还利息",
                        key: "actualInterest",
                        slot: "actualInterest",
                    },
                ],
                contractTableHeadPenaltyInterest: [
                    {
                        title: "合同号",
                        key: "contractNo",
                    },
                    {
                        title: "期数",
                        key: "termNo",
                    },
                    {
                        title: "逾期日期起",
                        key: "overdueDateStart",
                    },
                    {
                        title: "逾期日期止",
                        key: "overdueDateEnd",
                    },
                    {
                        title: "逾期天数",
                        key: "overdueDays",
                    },
                    {
                        title: "利率%",
                        key: "interestRate",
                    },
                    {
                        title: "逾期金额",
                        key: "overdueAmount",
                        slot: "overdueAmount",
                    }
                    ,
                    {
                        title: "豁免金额",
                        key: "exemptionAmount",
                        slot: "exemptionAmount",
                    },
                    {
                        title: "已还金额",
                        key: "amountPaid",
                        slot: "amountPaid",
                    } ,{
                        title: "本次已还款金额",
                        key: "repaymentAmount",
                        slot: "repaymentAmount",
                    }
                ],
                contractTableHeadCost: [
                    {
                        title: "合同号",
                        key: "contractNo",
                    },
                    {
                        title: "费用类型",
                        key: "feeType",
                        slot: "feeType"
                    },
                    {
                        title: "到期日",
                        key: "dueDate",
                    },
                    {
                        title: "费用金额",
                        key: "costAmount",
                        slot: "costAmount",
                    },
                    {
                        title: "豁免金额",
                        key: "exemptionAmount",
                        slot: "exemptionAmount",
                    },
                    {
                        title: "已还金额",
                        key: "amountPaid",
                        slot: "amountPaid",
                    } ,{
                        title: "本次已还款金额",
                        key: "repaymentAmount",
                        slot: "repaymentAmount",
                    }
                ]
            };
        },
        mounted() {
            this.getReceiptRecordInfo();
        },
        methods: {
            getReceiptRecordInfo() {
                getReceiptRecordInfo({contractNo:this.Obj.contractNo, receiptId:this.Obj.receiptId}).then(res => {
                    if (res.code === "0000") {
                        this.contractTable.allocatedRentVo = res.data.allocatedRentVo;
                        this.contractTable.allocatedPenaltyInterestVo = res.data.allocatedPenaltyInterestVo;
                        this.contractTable.allocatedCostVo = res.data.allocatedCostVo;
                        this.contractTable.writeOffAmount = res.data.writeOffAmount;
                        this.contractTable.usedAmt = res.data.usedAmt;
                        this.contractTable.unusedAmt = res.data.unusedAmt;
                        this.contractTable.overpayment = res.data.overpayment;
                        this.contractTable.cancellationAmount = res.data.cancellationAmount;
                        this.contractTable.unallocatedAdjustmentAmount =  res.data.unallocatedAdjustmentAmount;
                    }
                })
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            }

        }
    };
</script>
<style scoped>
    .basis-info>>>.ivu-input[disabled]{
        color: black;
    }
    .basis-info>>>.ivu-select-disabled .ivu-select-selected-value{
        color:#515a6e;
    }
    .basis-info>>>.ivu-input-number-input[disabled]{
        color:black;
    }
</style>
